import React, {Component} from 'react'
import {connect} from 'react-redux'
import {Result, List, Button, WhiteSpace,Modal} from 'antd-mobile'
import Cookies from 'js-cookie'
import {resetUser} from '../../redux/actions'

const Item = List.Item;
const Brief = Item.Brief;

class Personal extends Component {

  loginOut = () => {
    Modal.alert('退出','确定要退出登录吗？',[
      {
        text:'取消',
        onPress: () => {}
      },
      {
        text: '确定',
        onPress: () => {
          // 清除cookie中的userid
          Cookies.remove('userid');
          // 重置用户的同步action
          this.props.resetUser();
        }
      }
    ])
  };

  render() {

    const {username, info, header, company, post, salary} = this.props.user;

    return (
        <div>
          <Result
              img={<img src={require(`../../assets/images/${header}.png`)} alt='' style={{width: '50px', height: '50px'}}/>}
              title={username}
              message={company}
              style={{marginTop:45}}
          />
          <List renderHeader={() => '相关信息'}>
            <Item multipleLine>
              <Brief>职位：{post}</Brief>
              <Brief>简介：{info}</Brief>
              {salary ? <Brief>薪资：{salary}</Brief> : null}
            </Item>
            <WhiteSpace/>
          </List>
          <Button type="warning" onClick={this.loginOut}>退出登录</Button>
        </div>
    )
  }
}

export default connect(
    state => ({user: state.user}),
    {resetUser}
)(Personal)